<template>
	<view>
		<view class="loading" v-if="loading || fail">
			<u-loading :show="loading"></u-loading>
			<u-empty mode="data" :show="fail"></u-empty>
		</view>
		<block v-else>
			<u-gap></u-gap>
			<view class="box">
				<block v-if="info.status == 10">
					<view class="time">
						<u-icon name="clock"></u-icon>
						<view class="value">倒计时：<u-count-down :timestamp="info.timestamp"></u-count-down>
						</view>
					</view>
					<view class="title">还差<text>{{info.neededUserCount}}</text>人，立即邀请好友来抢购吧</view>
				</block>
				<block v-if="info.status == 30">
					<u-gap></u-gap>
					<view class="title">抢购取消</view>
				</block>
				<block v-if="info.status == 40">
					<u-gap></u-gap>
					<view class="title" style="color: #FF4D46;">抢购失败</view>
				</block>
				<block v-if="info.status == 20">
					<u-gap></u-gap>
					<view class="title" style="color: #F39D21;">抢购完成</view>
				</block>
				<block v-if="info.status == 10">
					<button open-type="share" class="btn active">邀请好友抢购</button>
					<u-gap></u-gap>
				</block>
				<view class="btn home" @click="$u.route({
				url:'/pages/tabBar/index/index',
				type:'tab'
			})">去首页逛逛</view>
				<u-gap></u-gap>
			</view>
			<u-gap></u-gap>
			<view class="box">
				<view class="user">
					<view class="user-item">
						<view class="u-image">
							<u-image borStyle="2rpx solid #FD5E1D" width="128" height="128" mode="aspectFill" shape="circle" :src="info.launchUserInfo.headPhoto"></u-image>
							<view class="tag">
								拼主
							</view>
						</view>
					</view>
					<view class="user-item" v-if="info.joinUserList && info.userId != item.id" v-for="(item,index) in info.joinUserList"
					 :key="index">
						<view class="u-image">
							<u-image borStyle="2rpx solid #FD5E1D" width="128" height="128" mode="aspectFill" shape="circle" :src="item.headPhoto && item.headPhoto != '' ? imgURL + item.headPhoto : appletImgUrl+'logo.png'"></u-image>
						</view>
					</view>
					<view class="station" :key="item" v-for="(item) in info.configPersonCount - (info.joinUserList ? info.joinUserList.length : 0)">
						<u-image width="128" height="128" :src="appletImgUrl+'rush-user-icon.png'"></u-image>
					</view>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
import {appletImgUrl} from "@/common/config.js"
	export default {
		onShareTimeline() {
			return {
				title: this.info.launchUserInfo.nickName + '邀请您参与Ta的抢购',
				path: '/pages/participate/participate?groupBuyingListId=' + this.info.id + '&userId=' + uni.getStorageSync(
					'userInfo').id,
				imageUrl: this.goodsMainPhoto
			}
		},
		onShareAppMessage() {
			return {
				title: this.info.launchUserInfo.nickName + '邀请您参与Ta的抢购',
				path: '/pages/participate/participate?groupBuyingListId=' + this.info.id + '&userId=' + uni.getStorageSync(
					'userInfo').id,
				imageUrl: this.goodsMainPhoto
			}
		},
		data() {
			return {
				appletImgUrl:appletImgUrl,
				loading: true,
				fail: false,
				info: '',
				imgURL: this.imageURL
			};
		},
		onLoad(options) {
			this.$u.get('groupbuyinglist/groupBuyingListInfoById/' + options.groupBuyingListId).then(res => {
				this.loading = false
				if (res == '') {
					this.fail = true
					return
				}
				let info = res
				let goodsMainPhoto = res.goodsInfo.goodsMainPhoto.split(',')
				this.goodsMainPhoto = this.imageURL + goodsMainPhoto[0]
				let currentTime = new Date()
				let cDate =
					`${currentTime.getFullYear()}-${currentTime.getMonth()+1}-${currentTime.getDate()} ${currentTime.getHours()}:${currentTime.getMinutes()}:${currentTime.getSeconds()}`
				cDate = cDate.replace(/-/g, ':').replace(' ', ':');
				cDate = cDate.split(':');
				let date1 = new Date(cDate[0], (cDate[1] - 1), cDate[2], cDate[3], cDate[4], cDate[5]);

				let buyingEstimateTime = info.buyingEstimateTime
				if (buyingEstimateTime) {
					buyingEstimateTime = buyingEstimateTime.replace(/-/g, ':').replace(' ', ':');
					buyingEstimateTime = buyingEstimateTime.split(':');
					let date2 = new Date(buyingEstimateTime[0], (buyingEstimateTime[1] - 1), buyingEstimateTime[2],
						buyingEstimateTime[3], buyingEstimateTime[4], buyingEstimateTime[5]);
					let date3 = (date2.getTime() - date1.getTime()) / 1000; //相差秒数
					info.timestamp = date3
				}

				info.launchUserInfo.headPhoto = info.launchUserInfo.headPhoto ? this.imageURL + info.launchUserInfo.headPhoto :
				this.appletImgUrl+'logo.png'
				console.log(info);
				this.info = info
			}).catch(error => {
				this.loading = false
				this.fail = true
				console.log(error);
			})
		}
	}
</script>

<style lang="scss">
	.loading {
		height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	page {
		background-color: #f7f7f7;
	}

	.box {
		background-color: #FFFFFF;
		margin: 0 30rpx;
		border-radius: 20rpx;

		.user {
		// margin-top: 35rpx;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		// padding: 0 16rpx;
		padding-bottom: 35rpx;
		width: 609rpx;
		// background-color: red;
		margin: 0 auto;
		
			.station {
				margin-top: 35rpx;
				padding: 0 14rpx;
			}

			.user-item {
				// margin-right: 40rpx;
			margin-top: 35rpx;
			padding: 0 14rpx;
				.tag {
					position: absolute;
					bottom: -20rpx;
					left: 50%;
					width: 76rpx;
					transform: translateX(-50%);
					text-align: center;
					background: linear-gradient(90deg, #FD5C1D, #FD9B1D);
					border: 1rpx solid #FFFFFF;
					border-radius: 17px;
					color: #FFFFFF;
					font-size: 24rpx;
					padding: 2rpx 0;
				}

				.u-image {
					position: relative;
					width: 128rpx;
					height: 128rpx;
					// border: 2rpx solid #F39D21;
					// border-radius: 50%;
				}
			}
		}

		.btn {
			line-height: 100rpx;
			margin: 0 30rpx;
			font-size: 30rpx;
			text-align: center;
			border-radius: 49rpx;

			&.active {
				background: linear-gradient(90deg, #FF3868, #FC6161);
				color: #FFFFFF;
			}

			&.home {
				color: #FF4E47;
				border: 1rpx solid #FF4E47;
			}
		}

		.title {
			font-weight: bold;
			font-size: 36rpx;
			padding: 0 30rpx;
			padding-bottom: 30rpx;

			text {
				color: #FF4E47;
			}
		}

		.time {
			padding: 30rpx;
			display: flex;

			.value {
				margin-left: 10rpx;
				font-size: 24rpx;
				color: #343434;
			}
		}
	}
</style>
